<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <!--Meta setup - Required for apple device-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!--Title-->
    <title>密码重置</title>
	<!--Required libraries-->
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		body{
			background-color: #CCCCCC;
		}
		.content{
			width: 100%;
			height: 100%;
		}
		.main{
			width: 400px;
			height: 300px;
			margin: 18% auto 0;
			background-color: #ffffff;
			border-radius: 15px;
			box-shadow: 2px 3px 6px #999;
			overflow: hidden;
		}
		.mainTop{
			width: 100%;
			height: 45px;
			background-color: #0273FD;
		}
		.password{
			font-weight: 500;
			line-height: 40px;
			padding: 0 10%;
			margin-top: 40px;
		}
		.pass1{
			font-size: 18px;
			color: #333;
			font-weight: 600;
		}
		.pass2{
			font-size: 16px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			display: block;
			text-align: center;
		}
		.alerts{
			text-align: left;
			color: #666;
			font-size: 15px;
			border-top: 2px solid #0389FC;
			width: 80%;
			margin: 5px auto;
			line-height: 25px;
		}
		.hint{
			text-align: left;
			color: #666;
			font-size: 15px;
			width: 80%;
			margin: 0 72%;
			line-height: 25px;
		}
		
		input{
			padding: 3px 12px;
		    font-size: 14px;
		    line-height: 1.42857143;
		    color: #555;
		    background-color: #fff;
		    background-image: none;
		    border: 1px solid #ccc;
		    border-radius: 4px;
		    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
		    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
		    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
		    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
		    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
		}
		
		.btn {
		    display: inline-block;
		    padding: 6px 12px;
		    margin-bottom: 0;
		    font-size: 14px;
		    font-weight: normal;
		    line-height: 1.42857143;
		    text-align: center;
		    white-space: nowrap;
		    vertical-align: middle;
		    -ms-touch-action: manipulation;
		    touch-action: manipulation;
		    cursor: pointer;
		    -webkit-user-select: none;
		    -moz-user-select: none;
		    -ms-user-select: none;
		    user-select: none;
		    background-image: none;
		    border: 1px solid transparent;
		    border-radius: 4px;
		}
		.btn-primary {
		    color: #fff;
		    background-color: #0f73ca;
		    border-color: #2e6da4;
		}
	</style>
    <script src="/static/js/jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
<body>
<div class="content">
	<div class="main" id="main1">
		<div class="mainTop"></div>
		<div class="password">
			<text class="pass1">新密码：</text><input style="margin-left: 36px;" type="password" id="psw1" placeholder="包含大写字母、小写字母、数字、特殊符号（不是字母，数字，下划线，汉字的字符）的8位以上"/>
		</div>
		<div class="password" style="margin-top: 0px;">
			<text class="pass1">重复新密码：</text><input type="password" id="psw2" placeholder="包含大写字母、小写字母、数字、特殊符号（不是字母，数字，下划线，汉字的字符）的8位以上"/>
		</div>
		<div id="update-psw" class="btn btn-primary" style="margin:5% 38%;text-align: center;">确认重置</div>
		<div class="hint">望天API</div>
	</div>
	<div class="main" id="main2" style="display: none;">
		<div class="mainTop"></div>
		<img src="/static/image/success.jpg" style="width: 240px;height: 190px;margin-left: 25%;">
		<div>
			<text class="pass1" style="margin-left: 37%;color:#0d7fe2;" >重置成功</text>
		</div>
		<div class="hint">望天API</div>
	</div>
</div>
</body>
<script type="text/javascript" th:inline="javascript">

$(function(){
	var walletId = [[${walletId}]];
	var walletToken = [[${walletToken}]]
	
	$("#update-psw").click(function(){
		if($("#psw1").val()==""){
			alert("新密码不能为空");
			return;
		}
		if($("#psw1").val()!=$("#psw2").val()){
			alert("两次密码不一致");
			return;
		}
		$.ajax({
			type:"POST",
			url:"/password/updatePassword",
			data:{
				walletId:walletId,
				walletToken:walletToken,
				newPsw:$("#psw1").val()
			},
			success:function(data){
				if(data.success){
					$("#main2").show();
					$("#main1").hide();
				}else{
					alert(data.message);
				}
			}
		})
	});
});

</script>
</html>